<template>
    <div>
        <!-- v-if 相当于js的if  条件成立渲染到页面上 不成立就不渲染-->
         <p v-if="age < 18">青年</p>
         <p v-else-if="age > 18 && age <30"> 壮年</p>
         <p v-else>老年</p>

        <!-- v-show 相当于 display:none-->
         <div v-show="age > 50">跳广场舞</div>
         <div v-show="age < 50">学习</div>
         <!-- 
            v-if和v-show的区别
            v-if：先判断那些需要加载，条件不成立的不加载，减少服务器压力。按需加载
            v-show： 一定会先加载出来 在需要的时候改变 display的显示隐藏样式
         -->
    </div>
</template>
<script>
    export default{
        data(){
            return {
                age:20
            }
        },
        methods:{

        },
    }
</script>